<template>
  <div>
    <div class="header">
      <span class="search-header">搜索用户数</span>
      <svg
        t="1654085472038"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2441"
        width="16"
        height="16"
      >
        <path
          d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-64A448 448 0 1 0 512 64a448 448 0 0 0 0 896zM512 192a32 32 0 0 1 32 32v384a32 32 0 0 1-64 0v-384A32 32 0 0 1 512 192z m0 640a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
          fill="#8D8D8D"
          p-id="2442"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span class="main-title">123456</span>
      <span class="main-content">17.1</span>
      <svg
        t="1654086809028"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7458"
        width="16"
        height="16"
      >
        <path
          d="M918.528 942.08H110.592a28.51328 28.51328 0 1 1 0-57.02144h807.936a28.51328 28.51328 0 1 1 0 57.02144zM127.94368 809.472a28.59008 28.59008 0 0 1-28.672-28.51328v-180.6336a28.672 28.672 0 0 1 57.344 0v180.6336a28.59008 28.59008 0 0 1-28.672 28.51328z m191.45216 4.57216a28.59008 28.59008 0 0 1-28.672-28.51328V511.1296a28.672 28.672 0 0 1 57.344 0v274.38592a28.59008 28.59008 0 0 1-28.672 28.51328z m191.44704 4.57216a28.59008 28.59008 0 0 1-28.672-28.51328v-370.432a28.672 28.672 0 0 1 57.344 0v370.41664a28.58496 28.58496 0 0 1-28.672 28.51328z m191.44704 0a28.59008 28.59008 0 0 1-28.672-28.51328V337.35168a28.672 28.672 0 0 1 57.344 0v452.74112a28.59008 28.59008 0 0 1-28.672 28.50816z m191.45216 0a28.58496 28.58496 0 0 1-28.672-28.51328V223.02208a28.672 28.672 0 0 1 57.344 0v567.0656a28.59008 28.59008 0 0 1-28.672 28.51328z"
          fill="#2966C1"
          p-id="7459"
        ></path>
        <path
          d="M152.7808 498.87744a28.64128 28.64128 0 0 1-25.6-15.7184 28.33408 28.33408 0 0 1 12.8-38.13376L743.64416 145.2032l-97.97632-6.6048a28.42624 28.42624 0 1 1 3.87584-56.71424l188.48768 12.70784a32.7168 32.7168 0 0 1 29.95712 25.92256 32.256 32.256 0 0 1-17.37728 35.13344l-685.056 340.224a28.672 28.672 0 0 1-12.7744 3.00544z"
          fill="#FD9A16"
          p-id="7460"
        ></path>
      </svg>
      <svg
        t="1654086737426"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6035"
        width="16"
        height="16"
      >
        <path
          d="M252.484267 566.749867h11.776v16.6912h-11.776zM815.684267 566.8352h10.461866v16.9984h-10.461866z"
          fill="#996E28"
          p-id="6036"
        ></path>
        <path
          d="M825.361067 580.642133a6.826667 6.826667 0 0 0-6.980267-3.618133l-158.0032 21.418667L680.2432 201.386667a6.826667 6.826667 0 0 0 0-1.058134v-1.109333a6.826667 6.826667 0 0 0-6.826667-7.168H405.1968a6.826667 6.826667 0 0 0-6.826667 7.168v1.109333a6.826667 6.826667 0 0 0 0 1.058134l19.848534 397.038933-158.0032-21.4016a6.826667 6.826667 0 0 0-5.922134 11.4176l280.0128 301.277867a6.826667 6.826667 0 0 0 10.001067 0L824.32 588.424533a6.826667 6.826667 0 0 0 1.041067-7.7824z"
          fill="#996E28"
          p-id="6037"
        ></path>
        <path
          d="M339.780267 523.7248H103.6288a17.066667 17.066667 0 1 1 0-34.133333h236.151467a13.380267 13.380267 0 1 0 0-26.760534h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565866h238.250667a17.066667 17.066667 0 0 1 0 34.133333h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272z"
          fill="#D5382E"
          p-id="6038"
        ></path>
        <path
          d="M545.194667 373.282133a17.066667 17.066667 0 0 1 0 34.133334h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272H103.6288a17.066667 17.066667 0 1 1 0-34.133334h236.151467a13.380267 13.380267 0 1 0 0-26.760533h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565867h238.250667m0-10.24h-238.250667a55.022933 55.022933 0 1 0-0.631467 110.045867h33.467734a3.140267 3.140267 0 1 1 0 6.280533H103.6288a27.306667 27.306667 0 1 0 0 54.613334h236.151467a57.7536 57.7536 0 1 0 0-115.5072h-33.467734a0.512 0.512 0 0 1-0.290133-0.170667 0.3584 0.3584 0 0 1-0.119467-0.221867 1.416533 1.416533 0 0 1 1.041067-0.426666h238.250667a27.306667 27.306667 0 0 0 0-54.613334z"
          fill="#E8D4AB"
          p-id="6039"
        ></path>
        <path
          d="M654.523733 591.854933h-1.5872l20.48-409.6H405.1968l20.48 409.6"
          fill="#AF3131"
          p-id="6040"
        ></path>
        <path
          d="M654.523733 593.5616h-1.5872l20.48-409.6H405.1968l20.48 409.6"
          fill="#D5382E"
          p-id="6041"
        ></path>
        <path
          d="M654.523733 600.388267h-1.5872a6.826667 6.826667 0 0 1-6.826666-7.168l20.1216-402.432H412.3648l20.1216 402.432-13.653333 0.682666-20.48-409.6a6.826667 6.826667 0 0 1 6.826666-7.168h268.253867a6.826667 6.826667 0 0 1 6.826667 7.168l-20.48 409.6-5.239467-0.256z"
          fill="#E8D4AB"
          p-id="6042"
        ></path>
        <path
          d="M425.6768 589.704533l-166.365867-22.528L539.306667 868.471467l279.995733-301.294934-164.778667 22.528"
          fill="#D5382E"
          p-id="6043"
        ></path>
        <path
          d="M425.6768 591.4112l-166.365867-22.528L539.306667 870.178133l279.995733-301.294933-164.778667 22.528"
          fill="#D5382E"
          p-id="6044"
        ></path>
        <path
          d="M539.306667 874.837333a6.826667 6.826667 0 0 1-5.000534-2.184533L254.293333 571.357867a6.826667 6.826667 0 0 1 5.922134-11.4176l158.122666 21.418666-19.968-399.223466a6.826667 6.826667 0 0 1 6.826667-7.168h268.2368a6.826667 6.826667 0 0 1 6.826667 7.168l-19.968 399.240533 158.122666-21.435733a6.826667 6.826667 0 0 1 5.922134 11.4176L544.3072 872.6528a6.826667 6.826667 0 0 1-5.000533 2.184533zM277.2992 576.034133L539.306667 857.975467l262.007466-281.941334-147.3536 19.968a6.826667 6.826667 0 0 1-7.7312-7.099733l20.0192-400.2816H412.3648l20.0192 400.264533a6.826667 6.826667 0 0 1-7.7312 7.099734z"
          fill="#E8D4AB"
          p-id="6045"
        ></path>
        <path
          d="M780.7488 226.338133h105.540267a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272z"
          fill="#D5382E"
          p-id="6046"
        ></path>
        <path
          d="M886.289067 226.338133a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272h105.540266m0-10.24h-105.557333a57.7536 57.7536 0 1 0 0 115.5072h8.0384a1.416533 1.416533 0 0 1 1.041067 0.426667 0.341333 0.341333 0 0 1-0.119467 0.221867 0.802133 0.802133 0 0 1-0.221867 0.170666H503.7056a27.306667 27.306667 0 0 0 0 54.613334h285.730133a55.022933 55.022933 0 1 0-0.631466-110.045867h-8.0384a3.140267 3.140267 0 1 1 0-6.280533h105.540266a27.306667 27.306667 0 0 0 0-54.613334z"
          fill="#E8D4AB"
          p-id="6047"
        ></path>
      </svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    // 初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    // console.log(lineCharts);
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        // 隐藏x轴
        show: false,
        type: "category",
      },
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      // 系列
      series: [
        {
          type: "line",
          smooth: true,
          data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
          // 拐点的样式设置
          itemStyle: {
            opacity: 0,
          },
          // 线条的样式
          lineStyle: {
            color: "blue",
          },
          // 填充颜色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.search-header {
  margin-right: 10px;
}
.main {
  margin: 10px 0px;
}
.main-title {
  margin-right: 30px;
}
.main-content {
  margin-right: 10px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>